<?php
    $this->layout('onboarding.phtml', [
        'title' => _('Welcome!'),
        'canonical' => url_full('onboarding', ['step' => 1]),
        'current_step' => 1,
    ]);
?>

<div class="section section--small section--longbottom">
    <div class="section__title">
        <h1><?= _f('Welcome %s!', protect($current_user->username)) ?></h1>
    </div>

    <form
        class="form--centered"
        method="post"
        action="<?= url('onboarding update locale') ?>"
        data-controller="autosubmit"
    >
        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
        <input type="hidden" name="redirect_to" value="<?= url('onboarding') ?>" />

        <div class="form-group">
            <label for="locale">
                <?= icon('language') ?>
                <?= _('Choose your language') ?>
            </label>

            <select
                id="locale"
                name="locale"
                data-action="autosubmit#submit"
                data-autosubmit-target="actionButton"
            >
                <?php foreach ($available_locales as $locale_value => $locale_name): ?>
                    <option
                        value="<?= $locale_value ?>"
                        <?= $locale_value === get_current_locale() ? 'selected' : '' ?>
                    >
                        <?= $locale_name ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
    </form>

    <hr />

    <p class="paragraph--featured">
        <strong><?= _f('The few next screens will explain you some main features of %s.', get_app_configuration('brand')) ?></strong>
    </p>

    <p class="paragraph--centered">
        <?= _f('There’s not much to know before getting started with %s. This onboarding should take less than 3 minutes of your time.', get_app_configuration('brand')) ?>
    </p>

    <p class="paragraph--centered">
        <a class="anchor--action" href="<?= url('onboarding', ['step' => 2]) ?>">
            <?= _('Continue') ?>
        </a>
    </p>

    <p class="paragraph--centered">
        <small>
            <a href="<?= url('home') ?>">
                <?= _('or skip the onboarding') ?>
            </a>
        </small>
    </p>
</div>
